<template>
    <div class="headeContainer">
        <div class="leftContent">
            <div class="left">
                <el-icon v-if="!isCollapse" @click="collapse"><Fold /></el-icon>
                <el-icon v-if="isCollapse" @click="collapse"><Expand /></el-icon>
            </div>
            <div class="right">首页</div>
        </div>
    </div>
</template>
<script setup>
import {ref,reactive,defineEmits} from 'vue'
//定义emits事件
/* 
    defineEmits接受一个数组，元素为自定义事件名
    defineEmit返回一个触发器，用于触发事件，第一个参数是具体事件，第二个是传递的值
*/
const emit=defineEmits(['getIsCollapse'])
const isCollapse=ref(false)
const collapse=()=>{
    console.log('lkkkk',isCollapse)
    isCollapse.value=!isCollapse.value;
    emit('getIsCollapse',isCollapse)
    // sessionStorage.setItem('isCollapse',isCollapse.value)
}

//定义props事件，接收父组件传递过来的值
const props=defineProps({
    testVal:{
        type:String
    }
})
console.log('父组件传递的值',props.testVal)
</script>
<style lang="less" scoped>
.headeContainer{
    width:100%;
    height:56px;
    background:#f1f1f1;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .leftContent{
        // width:100%;
        margin-left:10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .left{
            margin-right:10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    
}
</style>